<?php
/**
 * Description: 合作案例
 * User: Administrator
 * Date: 2018/9/30
 * Time: 15:07
 * Created by Created by Panxsoft.
 */
?>


{{-- 继承布局模板 --}}
@extends( 'official_website.layouts.main' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('lib/vue-js-modal/styles.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/case.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>合作案例-广州帕克西软件开发有限公司</title>
@endsection


@section('content')
    <!-- 大海报 -->
    <section class="banner">


    </section>
    <!-- v-cloak -->

    <section class="case" id="case" v-cloak>
        <!-- 导航 -->
        <div class="case-nav">
            <ul class="case-nav-list bym-wrapper bym-not-list">
               <li 
               v-for="(item, index) in categories" 
               :class="getNavigationItemClass(index)" 
               :key="item.id" 
               @click="changeCategory(item.id, index)">
                    <i class="icon"></i>
                    <a href="javascript:;">@{{item.name}}</a>
                </li>
            </ul>
        </div>
        <!-- 导航 end -->
        <div class="case-content"  >
            <div v-show="!loading">
                <!-- 内容列表 -->
                <ul class="case-list bym-not-list clearfix"  >
                    <li 
                        class="case-list-item"
                        v-for="(item,index) in cases" 
                        @click="openModal(item.thumb, item.description)" 
                        :key="item.id">
                        <div class="case-list-item-cover">
                           <img :src="item.thumb" alt="">
                        </div>
                        <h3 class="case-list-item-title">@{{item.title}}</h3>
                        <p  class="case-list-item-desc" :title="item.description">
                            @{{item.description | textOverflow}}
                        </p>
                    </li>
                </ul>

                <!-- 内容列表 end

                <!-- 分页 -->
                <bym-pagination 
                    v-if="cases.length  && !loading" 
                    v-on:change-page="changePage"
                    :total="paginate.last_page"
                    :current="paginate.current_page"
                    :next="paginate.next_page_url"
                    :perv="paginate.prev_page_url"
                ></bym-pagination>
            </div>

            <div class="case-loading-info" v-show="loading">@lang('case.loading')</div>
            <div class="case-loading-info" v-show="!loading && !cases.length">@lang('case.empty')</div> 
        </div>
        <!-- :scrollable="true" -->
        <modal name="picture-modal" width="776" :max-height="400" height="auto" >
            <div class="modal-box">
                <div class="modal-box-picture">
                    <img :src="picture" alt="">
            </div>
                <p class="modal-box-desc">
                    @{{description}}
                </p>
            </div>
            
        </modal>

    </section>

    {{--分页插件模板--}}
    <script type="text/x-template" id="bym_pagination" >
        <ul class="bym-pagination">
            <li class="prev" v-if="current > 1"><a  href="javascript:;"  @click="clickHandle(current-1)">@lang('case.previous')</a></li>
            <li class="prev" v-else><a class="disable" href="javascript:;">@lang('case.previous')</a></li>
            <li v-for="index in pageList" >
                <template v-if="typeof index === 'number'" >
                    <a href="javascript:;" v-text="index" @click="clickHandle(index)" :class="[index === current ? 'active' :'']"></a>
                </template>
                <template v-else>
                    <a v-text="index" class="disable"></a>
                </template>
            </li>
            <li class="next" v-if="current < total"><a href="javascript:;" @click="clickHandle(current+1)" >@lang('case.next')</a></li>
            <li class="next" v-else><a class="disable" href="javascript:;">@lang('case.next')</a></li>
        </ul>
    </script>
@endsection

@section('script')
    <script type="text/javascript" src="{{asset('js/qs.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('lib/vue-js-modal/index.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/pagination.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/case.js')}}"></script>
@endsection